<template>
  <div class="page-register flex items-center justify-center">
    <div class="register-box p-6 sm:p-12 bg-white rounded">
      <div class="flex flex-col items-center">
        <h1 class="text-2xl xl:text-3xl font-extrabold">
          用户注册
        </h1>
        <div class="w-full flex-1 mt-6">
          <div class="mx-auto max-w-xs">
            <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" size="large">
              <el-form-item prop="account">
                <el-input v-model="registerForm.account" placeholder="用户名">
                  <template #prefix>
                    <i-ep:user />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input v-model="registerForm.pwd" type="password" show-password placeholder="密码"
                  @keyup.enter="handleRegister(registerFormRef)">
                  <template #prefix>
                    <i-ep:lock />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwdAgain">
                <el-input v-model="registerForm.pwdAgain" type="password" show-password placeholder="再次输入密码"
                  @keyup.enter="handleRegister(registerFormRef)">
                  <template #prefix>
                    <i-ep:lock />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-button w-320px mt-6 rounded size="large" type="primary" :loading="loading"
              @click="handleRegister(registerFormRef)">
              注册
            </el-button>
            <div mt-2 text-sm flex flex-justify-end>
              <el-link @click="toLogin" type="primary">去登录</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import type { FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const registerFormRef = ref<FormInstance>()
const registerRules = reactive<FormRules>({
  account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  pwdAgain: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
})

// 登录表单数据
const registerForm = reactive({
  account: '',
  pwd: '',
  pwdAgain: ''
})

const loading = ref(false)
const handleRegister = (formEl: FormInstance | undefined) => {
}

const toLogin = () => {
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.page-register {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-color: #00000044;

  .register-box {
    filter: drop-shadow(2px 4px 4px gray);
  }
}
</style>